<!--大气监测-->
<template>
    <div class="leftView">
        <div class="shrink" @click="changeShows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: row">
                <div style="display: flex;flex-direction: column">
                    <div class="container container_1 height357">
                        <div class="container_title">
                            <span>实时空气质量</span>
                        </div>
                        <div class="top">
                            <div class="head flex">
                                <div class="title">园区AQI</div>
                                <div class="time">{{ currentTime }}</div>
                            </div>
                            <div class="chart_list flex">
                                <div class="chart_item">
                                    <div class="chart_1" ref="chart_1_1"></div>
                                    <div class="chart_name">AQI</div>
                                </div>
                                <div class="chart_item">
                                    <div class="chart_1" ref="chart_1_2"></div>
                                    <div class="chart_name">首要污染物</div>
                                </div>
                                <div class="chart_item">
                                    <div class="chart_1" ref="chart_1_3"></div>
                                    <div class="chart_name">空气质量</div>
                                </div>
                            </div>
                        </div>
                        <div class="middle">
                            <div class="head">
                                <div class="title">污染物浓度（单位：μg/m³,CO mg/m³）</div>
                            </div>
                            <div class="chart_list flex" v-if="chart_2_data">
                                <div class="chart_item" v-for="(item, index) in chart_2_data" :key="index">
                                    <div class="chart_name">{{ item.NAME }}</div>
                                    <div class="chart_value">{{ item.factorValue }}</div>
                                    <div class="chart_2" ref="chart_2_1" :style="{backgroundColor: item.color}"></div>
                                </div>
                                <!--                        <div class="chart_item">
                                                            <div class="chart_name">PM10</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">O3</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">SO2</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">NO2</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">CO</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>-->
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="head flex" style="flex-direction: column;width: 100%">
                                <div class="time_select">
                                    24小时
                                </div>
                                <div style="display: flex;flex-direction: row;justify-content: space-between">
                                    <div v-for="(item, index) in chart_3_names" :key="index"
                                         :class="item.value === chart_3_active ? 'chart_name active' : 'chart_name'">
                                        {{ item.label }}
                                    </div>
                                </div>
                            </div>
                            <div class="chart_4" ref="chart_4"></div>
                        </div>

                    </div>
                    <div class="container container_2 height291">
                        <div class="container_title">
                            <span>空气环境</span>
                        </div>
                        <div class="top">
                            <div class="chart_list flex">
                                <div class="chart_item" style="width: 50%">
                                    <div class="chart_name">空气优良天数</div>
                                    <div class="chart_mini_name">（及同比增长天数）</div>
                                    <div class="chart_5 chart_5_1"></div>
                                    <div class="chart_value">{{ airEnvironment.goodDays }}<span><span
                                            class="arr_up"></span>{{ chart_5_data.goodDaysChange }}</span></div>
                                    <div class="chart_unit">天</div>
                                </div>
                                <div class="chart_item" style="width: 50%">
                                    <div class="chart_name">空气优良率</div>
                                    <div class="chart_mini_name">（及同比增长）</div>
                                    <div class="chart_5 chart_5_2"></div>
                                    <div class="chart_value">{{ airEnvironment.goodDaysRate }}<span><span
                                            class="arr_up"></span>{{ chart_5_data.goodDaysRateChange }}</span></div>
                                    <div class="chart_unit">%</div>
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="head">
                                <div class="chart_name">PM2.5平均浓度</div>
                            </div>
                            <div class="chart_6" ref="energyCharts"></div>
                        </div>
                    </div>
                </div>
                <div style="display: flex;flex-direction: column">
                    <div class="container container_3 height160 boxSize">
                        <div class="container_title">
                            <span>24小时噪声变化趋势</span>
                        </div>
                        <div class="chart_7" ref="chart_7"></div>
                    </div>
                    <div class="container container_4 height113">
                        <div class="container_title">
                            <span>重点监测数据</span>
                        </div>
                        <div class="chart_list flex">
                            <div class="chart_8 chart_8_1">
                                <div v-if="chart_8_data[0]">
                                    <div class="chart_value">{{ chart_8_data[0].value }}</div>
                                    <div class="chart_name">{{ chart_8_data[0].name }}/吨</div>
                                    <div class="chart_des">
                                        同比上月
                                        <span>{{ chart_8_data[0].compareLastMonth }}
                                             <span v-if="!chart_8_data[0].compareLastMonth > 0"
                                                   class="arr_up_red"></span>
                                             <span v-else class="arr_down"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="chart_8 chart_8_2">
                                <div v-if="chart_8_data[1]">
                                    <div class="chart_value">{{ chart_8_data[1].value }}</div>
                                    <div class="chart_name">{{ chart_8_data[1].name }}/吨</div>
                                    <div class="chart_des">
                                        同比上月
                                        <span>{{ chart_8_data[1].compareLastMonth }}
                                            <span v-if="!chart_8_data[1].compareLastMonth > 0" class="arr_up_red"></span>
                                            <span v-else class="arr_down"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="chart_8 chart_8_3">
                                <div v-if="chart_8_data[2]">
                                    <div class="chart_value">{{ chart_8_data[2].value }}</div>
                                    <div class="chart_name">{{ chart_8_data[2].name }}/吨</div>
                                    <div class="chart_des">
                                        同比上月
                                        <span>{{ chart_8_data[2].compareLastMonth }}
                                            <span v-if="!chart_8_data[2].compareLastMonth > 0" class="arr_up_red"></span>
                                            <span v-else class="arr_down"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container container_5 height381">
                        <div class="container_title">
                            <span>大气环境监测</span>
                        </div>
                        <div class="top boxSize">
                            <div class="head flex"><span class="sign"></span><span
                                    class="chart_title">今年空气质量等级占比</span></div>

                            <div class="chart_9" ref="chart_9"></div>
                        </div>
                        <div class="bottom boxSize flex">
                            <div class="bottom_item bottom_left">
                                <div class="head flex"><span class="sign"></span><span
                                        class="chart_title">今年首要污染物占比</span></div>
                                <div class="chart_10" ref="chart_10"></div>
                            </div>
                            <div class="bottom_item bottom_right">
                                <div class="head flex"><span class="sign"></span><span
                                        class="chart_title">主要污染物监测</span></div>
                                <div class="chart_10" ref="chart_11"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import {
    getAqmsOfAlarm,
    getWgOverLast24Hours,
    getPomsOfAlarm,
    getReportingEventsNumber,
    getInspectNumber,
    getComprehensiveOfAlarm,
    getCourentDayAlarmSite,
    getDetailsOfAlarmById,
    get24HoursTrend,
    getMainPollutant,
    getSiteData,
    getAirEnv,
    getRealAqiReport,
    getSiteRealData,
    getYearAqiTrend,
    getAqiDailyData,
    getChaoBiaoCompanyNum,
    getCurrentYearCompanyData,
    getCompanyList,
    pollutionPreventionMonitoring,
    getKeyMonitor,
    keyMonitoringData,
    getNoiseData
} from '@/monitorApi/axios'
import pieEcharts from "echarts";
import * as echarts from "echarts";
import moment from "moment";

export default {
    name: "airLeft",
    data() {
        return {
            currentTime: moment().format('YYYY-MM-DD HH:mm'),//当前时间
            shows: true,
            chart_1_data: {
                timeStr: ''
            },
            chart_2_data: [],
            chart_3_active: 'AQI',
            chart_3_names: [
                {value: 'AQI', label: 'AQI'},
                {value: 'PM2.5', label: 'PM2.5'},
                {value: 'PM10', label: 'PM10'},
                {value: 'O3', label: 'O3'},
                {value: 'SO2', label: 'SO2'},
                {value: 'NO2', label: 'NO2'},
                {value: 'CO', label: 'CO'},
            ],
            chart_5_data: {
                goodDays: '',
                goodDaysChange: '',
                goodDaysRate: '',
                goodDaysRateChange: '',
                totalDays: '',
            },
            chart_8_data: [],
            airEnvironment:[],
        }
    },
    mounted() {
        this.initChart_1_1()
        // this.initChart_1_2()
        // this.initChart_1_3()
        this.initChart_4()
        this.initChart_6()
        this.initChart_7()
        this.initChart_8()
        this.initChart_9()
    },
    beforeDestroy() {
    },
    methods: {
        changeShows() {
            this.shows = !this.shows
            this.$emit('leftViewImp', this.shows)
        },
        // 实时空气质量 - AQI
        initChart_1_1() {
            getRealAqiReport().then(res => {
                if (res.code === '200' && res.data) {
                    this.chart_1_data = res.data;
                    if (res.data.factor) {
                        this.chart_2_data = res.data.factor;
                    }


                    this.initChart_1_2()
                    this.initChart_1_3()
                    var echarts = require('echarts');
                    var option = {
                        series: [
                            {
                                type: 'gauge',
                                max: 500,
                                center: ['50%', '50%'],
                                startAngle: 240,
                                endAngle: -60,
                                itemStyle: {
                                    // color: this.chart_1_data.aqiColor
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#29e999'
                                    }, {
                                        offset: 1,
                                        color: '#06a192'
                                    }])
                                },
                                progress: {
                                    show: true,
                                    roundCap: true,
                                    width: 6
                                },
                                pointer: {
                                    show: false
                                },
                                axisLine: {
                                    roundCap: true,
                                    lineStyle: {
                                        width: 6,
                                        opacity: 0.3
                                    }
                                },
                                axisTick: {
                                    show: true,
                                    distance: -10,
                                    splitNumber: 2,
                                    length: 1,
                                    lineStyle: {
                                        width: 2,
                                        color: '#999'
                                    }
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    show: false
                                },
                                anchor: {
                                    show: false
                                },
                                title: {
                                    show: false
                                },
                                detail: {
                                    valueAnimation: true,
                                    width: '60%',
                                    lineHeight: 10,
                                    borderRadius: 8,
                                    offsetCenter: [0, 0],
                                    fontSize: 14,
                                    fontWeight: 'bolder',
                                    formatter: '{value} ',
                                    color: '#FFFFFF'
                                },
                                data: [
                                    {
                                        value: parseInt(this.chart_1_data.aqi)
                                    }
                                ]
                            },

                        ]
                    };
                    echarts.init(this.$refs.chart_1_1).setOption(option);
                }
            }).catch(() => {
            });
        },
        // 实时空气质量 - 首要污染物
        initChart_1_2() {
            let _total = 0;
            _total = this.chart_1_data.pm25 + this.chart_1_data.pm10 + this.chart_1_data.so2 + this.chart_1_data.no2 +
                this.chart_1_data.co + this.chart_1_data.o3
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        max: _total,
                        center: ['50%', '50%'],
                        startAngle: 240,
                        endAngle: -60,
                        itemStyle: {
                            // color: this.chart_1_data.pm25Color
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#27b7ff'
                            }, {
                                offset: 1,
                                color: '#0151ff'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: true,
                            distance: -10,
                            splitNumber: 2,
                            length: 1,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 14,
                            fontWeight: 'bolder',
                            formatter: '{value} ',
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: this.chart_1_data.pm25
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_1_2).setOption(option);
        },
        // 实时空气质量 - 空气质量
        initChart_1_3() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        max: 500,
                        center: ['50%', '50%'],
                        startAngle: 240,
                        endAngle: -60,
                        itemStyle: {
                            // color: this.chart_1_data.aqiColor
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#f5e43d'
                            }, {
                                offset: 1,
                                color: '#e5967f'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: true,
                            distance: -10,
                            splitNumber: 2,
                            length: 1,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 14,
                            fontWeight: 'bolder',
                            formatter: this.chart_1_data.level,
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: this.chart_1_data.aqi
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_1_3).setOption(option);
        },
        // 24小时数据
        initChart_4() {
            get24HoursTrend().then(res => {
                if (res.code === '200' && res.data) {
                    let _xAxis = [];
                    let _data = [];
                    res.data.dataList.forEach(item => {
                        _xAxis.push(item.time.slice(-2))
                        _data.push(parseInt(item.value))
                    })

                    var pieEcharts = require('echarts');
                    let option = {
                        grid: {
                            left: "5%",
                            right: "5%",
                            bottom: "10%",
                            top: "10%",
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: 'rgba(34, 40, 46, 0.5)',
                            borderWidth: "0", //边框宽度设置1
                            borderColor: "", //设置边框颜色
                            axisPointer: {
                                type: "none",
                            },
                            textStyle: {
                                color: "#ffffff" //设置文字颜色
                            },
                        },
                        backgroundColor: "",
                        yAxis: {
                            type: "value",
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#B8D3F1",
                                },
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'line',
                                    color: 'rgba(92,155,181)',
                                    width: 0.1,
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'line',
                                    color: '#2A6FDA',
                                    width: 1,
                                },
                            },
                        },
                        xAxis: [
                            {
                                type: "category",
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: "#B8D3F1",
                                    },
                                },
                                splitLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        type: 'line',
                                        color: '#2A6FDA',
                                        width: 1,
                                    },
                                },
                                data: _xAxis,
                            },
                        ],
                        series: [
                            {
                                name: "污染物浓度",
                                type: "bar",
                                zlevel: 1,
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 0,
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            {
                                                offset: 0,
                                                color: "rgb(57,89,255,1)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgb(46,200,207,1)",
                                            },
                                        ]),
                                    },
                                },
                                barWidth: 3,
                                data: _data
                                // data: [
                                //     1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
                                //     11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
                                //     21, 22, 23, 24
                                // ]
                            },
                        ],
                    };
                    pieEcharts.init(this.$refs.chart_4).setOption(option);
                }
            }).catch(() => {
            });
        },
        // pm2.5平均浓度
        initChart_6() {
            getAirEnv().then(res => {
                if (res.code === '200' && res.data) {
                    this.noiseEcharts(res.data)
                    this.airEnvironment = res.data
                    console.log(this.airEnvironment,'pm2.5平均浓度')
                }
            }).catch(() => {
            });
        },
        // pm2.5平均浓度
        noiseEcharts(noiseData) {
            const myEchart = echarts.init(this.$refs.energyCharts);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            const pm25Entries = Object.entries(noiseData.averagePm25);
            const averagelastYearPm25 = Object.entries(noiseData.averagelastYearPm25);

            const yAxis = pm25Entries.map(([month]) => month);
            const _data_1 = pm25Entries.map(([, value]) => Number(value.toFixed(1)));
            const _data_2 = averagelastYearPm25.map(([, value]) => value);
            option = {
                title: {
                    text: '单位：μg/m³',
                    textStyle: {
                        fontSize: 10,
                        color: '#DDF8FF'
                    },
                    right: '1%',
                    top: '1%'
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.5)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    axisPointer: {
                        type: "none",
                    },
                    textStyle: {
                        color: "#ffffff" //设置文字颜色
                    },
                },
                legend: {
                    itemWidth: 8,
                    itemHeight: 4,
                    padding: [14, 0, 0, 0],
                    textStyle: {
                        color: "#ffffff", //设置文字颜色
                        fontSize: 10,
                    },
                    data: ['本月', '去年同期']
                },
                grid: {
                    top: '18%',
                    left: '3%',
                    right: '4%',
                    bottom: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(0, 186, 255, 0.1)',
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    data: yAxis
                    // data: ['本月', '1-2月', '3-4月', '5-6月']
                },
                series: [
                    {
                        name: '本月',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                fontSize: 10,
                                color: '#BA35FF'
                            }
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: 'rgba(186, 53, 255, 0.1)'},
                                {offset: 1, color: '#BA35FF'}
                            ])
                        },
                        data: _data_1
                        // data: [18203, 23489, 29034, 104970]
                    },
                    {
                        name: '去年同期',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                fontSize: 10,
                                color: '#0084FF'
                            }
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: 'rgba(0, 132, 255, 0.1)'},
                                {offset: 1, color: '#0084FF'}
                            ])
                        },
                        data: _data_2
                        // data: [19325, 23438, 31000, 121594]
                    }
                ]
            };
            myEchart.setOption(option);
        },
        // 24小时噪声变化趋势
        initChart_7() {
            getNoiseData().then(res => {
                if (res.code === '200' && res.data) {
                    console.log(res,'24小时噪声变化趋势')
                    let _xAxis = [];
                    let _data = [];
                    for (let _key in res.data) {
                        _xAxis.push(_key + '点')
                        _data.push(res.data[_key])
                    }
                    var echarts = require('echarts');
                    let option = {
                        title: {
                            text: '',
                            textStyle: {
                                fontSize: 10,
                                color: '#DDF8FF'
                            },
                            right: '1%',
                            top: 0
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: 'rgba(34, 40, 46, 0.5)',
                            borderWidth: "0", //边框宽度设置1
                            borderColor: "", //设置边框颜色
                            axisPointer: {
                                type: "none",
                            },
                            textStyle: {
                                color: "#ffffff" //设置文字颜色
                            },
                        },
                        legend: {
                            right: 0,
                            itemWidth: 8,
                            itemHeight: 4,
                            textStyle: {
                                color: "#ffffff", //设置文字颜色
                                fontSize: 10,
                            },
                            data: ['噪音']
                        },
                        grid: {
                            top: '20%',
                            left: '3%',
                            right: '0%',
                            bottom: '1%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#F2F6FF",
                                    fontSize: 10
                                },
                            },
                            splitLine: {
                                show: false
                            },
                            data: _xAxis
                            // data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点']
                        },
                        yAxis: {
                            name: '分贝',
                            nameLocation: 'end',
                            nameTextStyle: {
                                color: "#CCCCCC",
                                fontSize: 10,
                                padding: ['0', '0', '6', '0'],
                            },
                            nameGap: 5,
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#F2F6FF",
                                    fontSize: 10
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'line',
                                    color: 'rgba(0, 186, 255, 0.1)',
                                    width: 1,
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        series: [
                            {
                                name: '噪音',
                                smooth: true,
                                areaStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: "#32D1FF" // 0% 处的颜色
                                            }, {
                                                offset: 0.7,
                                                color: "rgba(50,209,255,0)" // 100% 处的颜色
                                            }],
                                            globalCoord: false // 缺省为 false
                                        }
                                    }
                                },
                                // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224],
                                data: _data,
                                type: 'line',
                                symbol: 'circle',
                                symbolSize: 4,
                                itemStyle: {
                                    color: '#32D1FF'
                                },
                                lineStyle: {
                                    width: 1
                                }
                            }
                        ]
                    }
                    echarts.init(this.$refs.chart_7).setOption(option);
                }
            }).catch(() => {
            })

        },
        // 重点监测数据
        initChart_8() {
            keyMonitoringData().then(res => {
                if (res.code === '200' && res.data) {
                    this.chart_8_data = res.data
                }
            }).catch(() => {
            });
        },
        // 今年空气质量等级占比
        initChart_9() {
            getMainPollutant().then(res => {
                if (res.code === '200' && res.data) {
                    if (res.data.countDays) {
                        let _data = [];
                        for (let _key in res.data.countDays) {
                            _data.push({name: _key, value: res.data.countDays[_key]})
                        }
                        this.setChart_9(_data)
                    }
                    if (res.data.pollutantStatRate) {
                        let _yAxis = [];
                        let _data = [];
                        for (let _key in res.data.pollutantStatRate) {
                            let _val = res.data.pollutantStatRate[_key];
                            if (_val.toString().includes('.')) {
                                _val = _val.toFixed(2)
                            }
                            _yAxis.push(_key);
                            _data.push(_val)
                        }
                        this.setChart_10(_yAxis, _data);
                    }
                    if (res.data.pollutantStat) {
                        let _xAxis = [];
                        let _nameList = [];
                        let _data = [];
                        Object.keys(res.data.pollutantStat).forEach((item, index) => {
                            Object.keys(res.data.pollutantStat[item]).forEach((obj, num) => {
                                if (index === 0) {
                                    _nameList.push(obj);
                                }
                                if (!_data[num]) {
                                    _data[num] = [];
                                }
                                _data[num][index] = res.data.pollutantStat[item][obj]
                            })
                            _xAxis.push((index + 1) + '月');
                        })
                        this.settChart_11(_xAxis, _nameList, _data)
                    }
                }
            }).catch(() => {
            });

        },
        setChart_9(_data) {
            var echarts = require('echarts');
            let option = {
                tooltip: {
                    trigger: "item",
                    backgroundColor: 'rgba(34, 40, 46, 0.5)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    axisPointer: {
                        type: "none",
                    },
                    textStyle: {
                        fontSize: "16",
                        color: "#ffffff" //设置文字颜色
                    },
                    formatter: function (params) {
                        return params.name + " " + params.value + "天";
                    }
                },
                legend: [],
                color: ['#8FE064', '#16E3A7', '#43B7FE', '#3F0404', '#59008d', '#4D0101', '#9500EB', '#FA1D5D', '#FD4448', '#FE6649',
                    '#FABF2B', '#05EEFE'],
                series: [
                    {
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: '#ffffff',  // 改变标示线的颜色
                                }
                            },
                            show: true
                        },
                        label: {
                            color: '#ffffff',
                            formatter: '{b} {d}% \n\n',
                            textStyle: {//定义不同地方的文字的字体大小和颜色
                                fontSize: 10,
                            },
                            padding: [0, -18, 0, -18]
                        },

                        type: 'pie', // 设置统计图类型
                        iemStyle: {},
                        startAngle: '0',
                        selectedMode: 'single', // 一次只能选中一个模块
                        radius: ['40%', '65%'],
                        center: ['45%', '50%'],
                        clockwise: true,  // 逆时针开始排序
                        data: _data
                        // data: [
                        //     {value: 1, name: 'name1'},
                        //     {value: 2, name: 'name2'},
                        //     {value: 3, name: 'name3'},
                        //     {value: 4, name: 'name4'},
                        //     {value: 5, name: 'name5'},
                        //     {value: 6, name: 'name6'},
                        //     {value: 1, name: 'name7'},
                        //     {value: 1, name: 'name8'},
                        //     {value: 1, name: 'name9'},
                        //     {value: 1, name: 'name10'},
                        //     {value: 1, name: 'name11'},
                        //     {value: 1, name: 'name12'},
                        // ]
                    },
                ]
            }
            echarts.init(this.$refs.chart_9).setOption(option);
        },
        // 今年首要污染物占比
        setChart_10(_yAxis, _data) {
            var echarts = require('echarts');
            let option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.5)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    axisPointer: {
                        type: "none",
                    },
                    textStyle: {
                        color: "#ffffff" //设置文字颜色
                    },
                    formatter: '{b} {c}%',
                },
                legend: {
                    itemWidth: 8,
                    itemHeight: 4,
                    textStyle: {
                        color: "#ffffff", //设置文字颜色
                        fontSize: 10,
                    },
                    data: ['本月', '去年同期']
                },
                grid: {
                    top: '5%',
                    left: '3%',
                    right: '8%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    // max: 100,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                        formatter: '{value}%',
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(0, 186, 255, 0.1)',
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    data: _yAxis
                    // data: ['O2', 'CO', 'NO2', 'SO2', 'PM10', 'PM2.5', '优']
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                fontSize: 10,
                                color: '#DDF8FF'
                            },
                            formatter: '{c}%',
                        },
                        barWidth: 4,
                        itemStyle: {
                            borderRadius: [0, 2, 2, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: 'rgba(53, 18, 106, 0.5)'},
                                {offset: 0.5, color: 'rgba(249, 19, 98, 0.7)'},
                                {offset: 1, color: 'rgba(255, 142, 68, 1)'},
                            ])
                        },
                        data: _data
                        // data: [10, 20, 30, 20, 30, 40, 10]
                    }
                ]
            };
            echarts.init(this.$refs.chart_10).setOption(option);
        },
        // 主要污染物监测
        settChart_11(_xAxis, _nameList, _data) {
            let _colorList = [
                ["rgba(255,57,71,0.5)", "rgba(255,57,71,0)", "rgba(255,57,71,1)"],
                ["rgba(255,241,0,0.5)", "rgba(255,241,0,0)", "rgba(255,241,0,1)"],
                ["rgba(7,246,255,0.5)", "rgba(7,246,255,0)", "rgba(7,246,255,1)"],
                ["rgba(235,97,0,0.5)", "rgba(235,97,0,0)", "rgba(235,97,0,1)"],
                ["rgba(0,255,193,0.5)", "rgba(0,255,193,0)", "rgba(0,255,193,1)"],
                ["rgba(255,57,71,0.5)", "rgba(255,57,71,0)", "rgba(255,57,71,1)"],
            ]
            let _series = [];
            _nameList.forEach((item, index) => {
                _series.push(
                    {
                        name: item,
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: _colorList[index][0] // 0% 处的颜色
                                    }, {
                                        offset: 0.7,
                                        color: _colorList[index][1] // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        data: _data[index],
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 0,
                        itemStyle: {
                            color: _colorList[index][2]
                        },
                        lineStyle: {
                            width: 1
                        }
                    }
                )
            })
            var echarts = require('echarts');
            let option = {
                legend: {
                    icon: 'diamond',
                    itemWidth: 10,
                    itemHeight: 4,
                    // orient: 'vertical',
                    right: 0,
                    textStyle: {
                        color: "#ffffff", //设置文字颜色
                        fontSize: 10,
                    },
                    data: _nameList
                },
                grid: {
                    top: '18%',
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.5)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    axisPointer: {
                        type: "none",
                    },
                    textStyle: {
                        color: "#ffffff" //设置文字颜色
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    data: _xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(0, 186, 255, 0.1)',
                            width: 1,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: _series
                // series: [
                //     {
                //         name:'PM2.5',
                //         smooth: true,
                //         areaStyle: {
                //             normal: {
                //                 color: {
                //                     x: 0,
                //                     y: 0,
                //                     x2: 0,
                //                     y2: 1,
                //                     colorStops: [{
                //                         offset: 0,
                //                         color: "rgba(255,57,71,0.5)" // 0% 处的颜色
                //                     }, {
                //                         offset: 0.7,
                //                         color: "rgba(255,57,71,0)" // 100% 处的颜色
                //                     }],
                //                     globalCoord: false // 缺省为 false
                //                 }
                //             }
                //         },
                //         data: [10, 30, 50, 70, 90, 100, 120, 110, 100, 70, 60, 30, 10],
                //         type: 'line',
                //         symbol: 'circle',
                //         symbolSize: 0,
                //         itemStyle: {
                //             color: '#FF3947'
                //         },
                //         lineStyle: {
                //             width: 1
                //         }
                //     },
                //     {
                //         name:'PM10',
                //         smooth: true,
                //         areaStyle: {
                //             normal: {
                //                 color: {
                //                     x: 0,
                //                     y: 0,
                //                     x2: 0,
                //                     y2: 1,
                //                     colorStops: [{
                //                         offset: 0,
                //                         color: "rgba(255,241,0,0.5)" // 0% 处的颜色
                //                     }, {
                //                         offset: 0.7,
                //                         color: "rgba(255,241,0,0)" // 100% 处的颜色
                //                     }],
                //                     globalCoord: false // 缺省为 false
                //                 }
                //             }
                //         },
                //         data: [100, 90, 60, 90, 80, 70, 60, 50, 40, 30, 40, 50, 60],
                //         type: 'line',
                //         symbol: 'circle',
                //         symbolSize: 0,
                //         itemStyle: {
                //             color: '#FFF100'
                //         },
                //         lineStyle: {
                //             width: 1
                //         }
                //     },
                //     {
                //         name:'SO2',
                //         smooth: true,
                //         areaStyle: {
                //             normal: {
                //                 color: {
                //                     x: 0,
                //                     y: 0,
                //                     x2: 0,
                //                     y2: 1,
                //                     colorStops: [{
                //                         offset: 0,
                //                         color: "rgba(246,255,100,0.5)" // 0% 处的颜色
                //                     }, {
                //                         offset: 0.7,
                //                         color: "rgba(246,255,100,0)" // 100% 处的颜色
                //                     }],
                //                     globalCoord: false // 缺省为 false
                //                 }
                //             }
                //         },
                //         data: [90, 60, 90, 80, 70, 60, 50, 40, 30, 40, 50, 60, 80],
                //         type: 'line',
                //         symbol: 'circle',
                //         symbolSize: 0,
                //         itemStyle: {
                //             color: '#07F6FF'
                //         },
                //         lineStyle: {
                //             width: 1
                //         }
                //     },
                //     {
                //         name:'NO2',
                //         smooth: true,
                //         areaStyle: {
                //             normal: {
                //                 color: {
                //                     x: 0,
                //                     y: 0,
                //                     x2: 0,
                //                     y2: 1,
                //                     colorStops: [{
                //                         offset: 0,
                //                         color: "rgba(235,97,0,0.5)" // 0% 处的颜色
                //                     }, {
                //                         offset: 0.7,
                //                         color: "rgba(235,97,0,0)" // 100% 处的颜色
                //                     }],
                //                     globalCoord: false // 缺省为 false
                //                 }
                //             }
                //         },
                //         data: [70, 60, 50, 40, 90, 60, 90, 80, 30, 50, 60, 80, 40],
                //         type: 'line',
                //         symbol: 'circle',
                //         symbolSize: 0,
                //         itemStyle: {
                //             color: '#EB6100'
                //         },
                //         lineStyle: {
                //             width: 1
                //         }
                //     }
                // ]
            }
            echarts.init(this.$refs.chart_11).setOption(option);
        },
    }
}
</script>

<style lang="scss">

</style>
<style lang="scss" scoped>

.height357 {
  height: 347px;
}

.height291 {
  height: 286px;
}

.height160 {
  height: 150px;
}

.height113 {
  height: 113px;
}

.height381 {
  height: 370px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxSize {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.leftView {
  float: left;
  margin-top: 20px;
  height: 660px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: Microsoft YaHei;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    padding: 20px 20px 0;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;

    .part_line {
      margin: 10px auto 0;
      width: 213px;
      height: 1px;
      background-color: #ddd;
    }

    &_title {
      width: 214px;
      height: 24px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/card_title.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }
  }

  .container_1 {
    width: 256px;
    background-image: url("@/assets/monitor/air/card_bg_1.png");

    .top {
      .head {
        padding: 10px 0;
        justify-content: space-between;
        font-size: 12px;

        .title {
          color: #00E6FF;
        }

        .time {
          color: #DDF8FF;
        }
      }

      .chart_list {
        justify-content: space-around;

        .chart_item {
          .chart_1 {
            width: 50px;
            height: 50px;
          }

          .chart_name {
            margin: 0 auto;
            min-width: 50px;
            height: 12px;
            text-align: center;
            background: linear-gradient(90deg, rgba(10, 141, 243, 0.3) 0%, rgba(10, 145, 244, 0.3) 100%);
            border-radius: 50px;
            font-size: 8px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 10px;
            opacity: 0.8;
          }
        }
      }
    }

    .middle {
      margin-top: 10px;

      .head {
        .title {
          height: 12px;
          font-size: 11px;
          color: #ffffff;
          line-height: 12px;
        }
      }

      .chart_list {
        margin-top: 9px;
        padding: 6px 0 7px;
        justify-content: space-around;
        background-color: rgba(1, 32, 68, 0.1);

        .chart_item {
          width: 26px;

          .chart_name {
            height: 12px;
            font-size: 10px;
            text-align: center;
            color: #02FFBD;
            line-height: 12px;
          }

          .chart_value {
            margin-top: 5px;
            height: 12px;
            font-size: 10px;
            text-align: center;
            color: #ffffff;
            line-height: 12px;
          }

          .chart_2 {
            margin-top: 5px;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            background-color: rgba(66, 158, 237, 0.3)
          }
        }
      }
    }

    .bottom {

      .head {
        justify-content: space-between;

        .time_select {
          width: 53px;
          height: 14px;
          font-size: 10px;
          text-align: center;
          color: #B8D3F1;
          line-height: 10px;
        }

        .chart_name {
          padding: 0px 5px;
          height: 10px;
          font-size: 10px;
          text-align: center;
          color: #DDF8FF;
          line-height: 10px;
        }

        .chart_name.active {
          color: #02FFBD;
          background-color: rgba(8, 58, 109, 0.9);
        }
      }

      .chart_4 {
        width: 100%;
        height: 80px;
      }
    }

  }

  .container_2 {
    width: 256px;
    background-image: url("@/assets/monitor/air/card_bg_2.png");

    .top {
      .chart_list {

        .chart_item {
          text-align: center;

          .chart_name {
            color: #02FFBD;
            font-size: 14px;
          }

          .chart_mini_name {
            color: #DDF8FF;
          }

          .chart_value {
            color: #10E4E5;
            font-size: 15px;

            span {
              font-size: 10px;

              .arr_up {
                display: inline-block;
                width: 3px;
                height: 5px;
                margin-left: 2px;
                margin-right: 2px;
                background-size: 100% 100%;
                background-image: url("@/assets/monitor/air/arr_up.png");
              }
            }
          }

          .chart_unit {
            font-size: 10px;
            color: #DDF8FF;
          }

          .chart_5 {
            margin: 0 auto;
            width: 39px;
            height: 33px;
            background-size: 100% 100%;
          }

          .chart_5_1 {
            background-image: url("@/assets/monitor/air/chart_5_bg.png");
          }

          .chart_5_2 {
            background-image: url("@/assets/monitor/air/chart_6_bg.png");
          }
        }
      }
    }

    .bottom {
      margin-top: 10px;

      .head {
        .chart_name {
          color: #00E6FF;
          font-size: 8px;
        }
      }

      .chart_6 {
        width: 100%;
        height: 123px;
      }
    }
  }

  .container_3 {
    width: 264px;
    background-image: url("@/assets/monitor/air/card_bg_3.png");

    .chart_7 {
      width: 100%;
      height: 90px;
    }
  }

  .container_4 {
    width: 264px;
    background-image: url("@/assets/monitor/air/card_bg_4.png");

    .chart_list {
      margin-top: 4px;
      justify-content: space-around;

      .chart_8_1 {
        color: #1EE4FF;

        .chart_des {
          span {
            color: #FF3838;
          }
        }
      }

      .chart_8_2 {
        color: #FFA21E;

        .chart_des {
          span {
            color: #FF3838;
          }
        }
      }

      .chart_8_3 {
        color: #48FF1E;

        .chart_des {
          span {
            color: #48FF1E;
          }
        }
      }

      .chart_8 {
        width: 71px;
        height: 35px;
        text-align: center;

        .chart_value {
          font-size: 11px;
        }

        .chart_name {
          font-size: 5px;
        }

        .chart_des {
          font-size: 4px;

          span {
            font-size: 4px;

            .arr_up_red {
              display: inline-block;
              width: 2px;
              height: 4px;
              background-size: 100% 100%;
              background-image: url("@/assets/monitor/air/arr_up_red.png");
            }

            .arr_down {
              display: inline-block;
              width: 2px;
              height: 4px;
              background-size: 100% 100%;
              background-image: url("@/assets/monitor/air/arr_up.png");
              transform: rotate(180deg);
            }
          }
        }
      }

      .chart_8_1 {
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/card_4_part_1_bg.png");
      }

      .chart_8_2 {
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/card_4_part_2_bg.png");
      }

      .chart_8_3 {
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/card_4_part_3_bg.png");
      }
    }

  }

  .container_5 {
    width: 264px;
    background-image: url("@/assets/monitor/air/card_bg_5.png");

    .head {
      justify-content: start;

      .sign {
        display: block;
        margin-right: 4px;
        width: 2px;
        height: 8px;
        background-color: #00E6FF;
      }

      .chart_title {
        font-size: 6px;
        color: #DDF8FF;
      }
    }

    .config_list {
      position: absolute;

      .config_item {
        margin-top: 5px;
        width: 50px;
        align-items: center;

        .config_color {
          width: 13px;
          height: 6px;
        }

        .config_value {
          margin-left: 3px;
          width: 21px;
          height: 6px;
          font-size: 6px;
        }
      }
    }

    .top {
      position: relative;
      margin: 5px auto 0;
      padding: 0 7px;
      width: 233px;
      height: 156px;
      background-color: rgba(0, 26, 68, 0.1);

      .chart_9 {
        width: 100%;
        height: 156px;
      }
    }

    .bottom {
      margin: 5px auto 0;
      width: 233px;
      justify-content: space-between;

      .bottom_item {
        position: relative;
        width: 114px;
        height: 140px;
        background-color: rgba(0, 26, 68, 0.1);
      }

      .chart_10 {
        width: 114px;
        height: 140px;
      }
    }
  }

}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return calc($pixel / 5 * 6);
  }
  @function calWidthCenter($pixel) {
    @return calc($pixel / 5 * 8);
  }
  @function calHeight_2k($pixel) {
    @return calc($pixel / 1.8 * 2.7);
  }
  @function calFont_2k($pixel) {
    @return calc($height_2k * $pixel / $height);
  }
  .height357 {
    height: calHeight_2k(347px);
  }

  .height291 {
    height: calHeight_2k(286px);
  }

  .height160 {
    height: calHeight_2k(150px);
  }

  .height113 {
    height: calHeight_2k(113px);
  }

  .height381 {
    height: calHeight_2k(370px);
  }

  .flex {
  }

  .boxSize {
  }

  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(660px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      padding-top: calHeight_2k(20px);
      padding-bottom: calHeight_2k(0px);

      .part_line {
        margin-top: calHeight_2k(10px);
        margin-bottom: calHeight_2k(10px);
        height: calHeight_2k(1px);
      }

      &_title {
        height: calHeight_2k(24px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }
    }

    .container_1 {
      width: calWidth_2k(256px);

      .top {
        .head {
          padding-top: calHeight_2k(10px);
          padding-bottom: calHeight_2k(10px);

          .title {
          }

          .time {
          }
        }

        .chart_list {

          .chart_item {
            .chart_1 {
              height: calHeight_2k(50px);
              width: calHeight_2k(50px);
            }

            .chart_name {
              height: calHeight_2k(12px);
              line-height: calHeight_2k(10px);
            }
          }
        }
      }

      .middle {
        margin-top: calHeight_2k(10px);

        .head {
          .title {
            height: calHeight_2k(12px);
            line-height: calHeight_2k(12px);
          }
        }

        .chart_list {
          margin-top: calHeight_2k(9px);
          padding-top: calHeight_2k(2px);
          padding-bottom: calHeight_2k(2px);

          .chart_item {

            .chart_name {
              height: calHeight_2k(12px);
              line-height: calHeight_2k(12px);
            }

            .chart_value {
              margin-top: calHeight_2k(5px);
              height: calHeight_2k(12px);
              line-height: calHeight_2k(12px);
            }

            .chart_2 {
              margin-top: calHeight_2k(5px);
              height: calHeight_2k(6px);
            }
          }
        }
      }

      .bottom {

        .head {

          .time_select {
            height: calHeight_2k(14px);
            line-height: calHeight_2k(10px);
          }

          .chart_name {
            height: calHeight_2k(10px);
            line-height: calHeight_2k(10px);
          }

          .chart_name.active {
          }
        }

        .chart_4 {
          height: calHeight_2k(80px);
        }
      }

    }

    .container_2 {
      width: calWidth_2k(256px);
      //margin-top: calWidth_2k(8px);

      .top {
        .chart_list {

          .chart_item {

            .chart_name {
            }

            .chart_mini_name {
            }

            .chart_value {

              span {

                .arr_up {
                  height: calHeight_2k(5px);
                }
              }
            }

            .chart_unit {
            }

            .chart_5 {
              height: calHeight_2k(33px);
            }

            .chart_5_1 {
            }

            .chart_5_2 {
            }
          }
        }
      }

      .bottom {
        margin-top: calHeight_2k(10px);

        .head {
          .chart_name {
          }
        }

        .chart_6 {
          height: calHeight_2k(123px);
        }
      }
    }

    .container_3 {
      width: calWidthCenter(264px);

      .chart_7 {
        height: calHeight_2k(90px);
      }
    }

    .container_4 {
      width: calWidthCenter(264px);

      .chart_list {
        margin-top: calHeight_2k(4px);

        .chart_8_1 {

          .chart_des {
            span {
            }
          }
        }

        .chart_8_2 {

          .chart_des {
            span {
            }
          }
        }

        .chart_8_3 {

          .chart_des {
            span {
            }
          }
        }

        .chart_8 {
          width: calWidthCenter(71px);
          height: calHeight_2k(35px);

          .chart_value {
          }

          .chart_name {
          }

          .chart_des {

            span {

              .arr_up_red {
                width: calWidthCenter(2px);
                height: calHeight_2k(4px);
              }

              .arr_down {
                width: calWidthCenter(2px);
                height: calHeight_2k(4px);
              }
            }
          }
        }

        .chart_8_1 {
        }

        .chart_8_2 {
        }

        .chart_8_3 {
        }
      }

    }

    .container_5 {
      width: calWidthCenter(264px);

      .head {

        .sign {
          margin-right: calWidthCenter(4px);
          width: calWidthCenter(2px);
          height: calHeight_2k(8px);
        }

        .chart_title {
        }
      }

      .config_list {

        .config_item {
          margin-top: calHeight_2k(5px);
          width: calWidthCenter(50px);

          .config_color {
            width: calWidthCenter(13px);
            height: calHeight_2k(6px);
          }

          .config_value {
            margin-left: calWidthCenter(3px);
            width: calWidthCenter(21px);
            height: calHeight_2k(6px);
          }
        }
      }

      .top {
        width: calWidthCenter(233px);
        height: calHeight_2k(156px);

        .chart_9 {
          height: calHeight_2k(156px);
        }
      }

      .bottom {
        width: calWidthCenter(233px);

        .bottom_item {
          width: calWidthCenter(114px);
          height: calHeight_2k(140px);
        }

        .chart_10 {
          width: calWidthCenter(114px);
          height: calHeight_2k(140px);
        }
      }
    }

  }
}
</style>
